<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css"/>

		<!-- 详情共用样式 -->
		<link rel="stylesheet" href="css/detailInfo.css" />

		<!-- 虚拟云主机样式 -->
		<link rel="stylesheet" href="css/xunidetailInfo.css" />

		<!-- 引入echartsjs  -->
		<script type="application/javascript" src="../js/echarts.min.js"></script>

	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="serverDetail-wrapper section" v-cloak>
			<div class="serverDetail-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">云服务器 CVM</span>
					<span class="nav-item">实例自定义/系统名称</span>
				</div>
				<div class="form-wrapper-parent fboxRow">
					<el-row class="w100" gutter="20" style="margin-left: -10px !important;margin-right: -10px !important;">
						<el-col :span="12">
							<div class="form-wrapper">
								<span class="from-title"><i class="icon el-icon-back"></i>实例自定义/系统名称</span>
								<div class="detailInfoContent fboxRow">
									<div class="imgwrapper"></div>
									<div class="contentwrapper">
										<div class="contentwrapper-info">
											<div class="contentwrapper-info-item">
												<span class="item-title">服务器状态</span>
												<span class="item-val">运行中</span>
											</div>
											<div class="contentwrapper-info-item">
												<span class="item-title">账号密码</span>
												<div class="item-val">
													<span style="position: relative;top: 2px;" v-if="serverInfo.isHidePassword" class="hidePassword">******</span>
													<span v-else class="showPassword">123456</span>
													<!-- &#xe600; -->
													<img src="./img/visual-default.png" @click="serverInfo.isHidePassword = false" v-if="serverInfo.isHidePassword"
													 style="margin-left: 20px;width: 14px;cursor: pointer;" class="" />
													<img src="./img/Visual-select.png" @click="serverInfo.isHidePassword = true" v-else style="margin-left: 20px;width: 14px;cursor: pointer;width: 16px;height: 16px;"
													 class="" />

												</div>
											</div>

											<div class="contentwrapper-info-item">
												<span class="item-title">ip地址</span>
												<span class="item-val">192.28.0.315</span>
											</div>
										</div>

										<div class="contentwrapper-button-wrapper fboxRow">
											<div @click="loginDIrectadmin" :class="{'noClick': isOpearing}" class="yzButton" style="width: 160px;">登录DIrectadmin</div>
											<div @click="handleClickResetPassword" :class="{'noClick': isOpearing}" class="yzButton">重设密码</div>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="12">
							<div class="form-wrapper meter">
								<el-row>
									<el-col :span="12">
										<div class="meter-wrapper left">
											<i class="linear"></i>
											<div class="meter-title-wapper  fboxRow">
												<span class="title">流量</span>
												<span class="link">附加流量 >></span>
											</div>
											<div class="meter-content-wrapper">
												<div style="width: 100%;height: 100%;" id="echarts-flow-wrapper" class="echarts-wrapper"></div>
											</div>
											<div class="meter-title-wapper  fboxRow down">
												<span class="val">总流量：1024G</span>
												<span class="usePercenter">使用率：{{handleFlowRate()}}%</span>
											</div>
										</div>
									</el-col>
									<el-col :span="12">
										<div class="meter-wrapper right">
											<div class="meter-title-wapper  fboxRow">
												<span class="title">磁盘</span>
											</div>
											<div class="meter-content-wrapper" >
												<span class="useDIsk">45G</span>
												<div class="progress-wrapper">
													<i :style="progressStyele()" class="progress-linear up"></i>
													<i :style="progressStyele()" class="progress-linear down"></i>
													<el-progress stroke-width="12" :color="customColorMethod()"  :percentage="diskpercentage" :format="diskFormt" ></el-progress>
												</div>
												
											</div>
											<div class="meter-title-wapper  fboxRow down">
												<span class="val">磁盘总大小：1024G</span>
												<span class="usePercenter">使用率：{{handleDIskRate()}}%</span>
											</div>
										</div>
									</el-col>
								</el-row>

							</div>
						</el-col>
					</el-row>

				</div>

				<div class="form-wrapper">
					<el-tabs v-model="activeTabName" @tab-click="handleClickTab">
						<el-tab-pane name="first">
							<span class="el-tabs-title" slot="label">实例详情</span>
							<div class="contentInfo-wrapper">
								<p class="content-title">配置信息</p>
								<div class="content-info-wrapper fboxRow">
									<div style="width: 100%;" class="content-info first fboxRow">
										<div class="content-info-item">
											<span class="item-key">
												机房：
											</span>
											<span class="item-val">
												1核1G
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												每月流量：
											</span>
											<span class="item-val">
												50G
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												磁盘容量：
											</span>
											<span class="item-val">
												100G
											</span>
										</div>

										<div class="content-info-item">
											<span class="item-key">
												环境：
											</span>
											<span class="item-val">
												5Mbps
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												建站数：
											</span>
											<span class="item-val">
												20G
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												数据库：
											</span>
											<span class="item-val">
												2个
											</span>
										</div>
									</div>
<!-- 									<div class="content-wrapper fboxRow">
										<div class="yzButton">升级配置</div>
									</div> -->
								</div>
							</div>
							<div class="contentInfo-wrapper">
								<p class="content-title">订单信息</p>
								<div class="content-info-wrapper fboxRow">
									<div class="content-info fboxRow second">
										<div class="content-info-item">
											<span class="item-key">
												订单编号：
											</span>
											<span class="item-val">
												15151473282891
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												付款金额：
											</span>
											<span class="item-val">
												150： 00
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												创建时间：
											</span>
											<span class="item-val">
												2020-11-25
											</span>
										</div>

										<div class="content-info-item">
											<span class="item-key">
												到期时间：
											</span>
											<span class="item-val">
												2020-11-30
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												账单周期：
											</span>
											<span class="item-val">
												5个月
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												自动续费：
											</span>
											<span class="item-val">
												未开通
											</span>
										</div>
									</div>
									<div class="content-wrapper fboxRow">
										<div @click="dialogRenewVisible = true" class="yzButton mr-10">去续费</div>
									</div>
								</div>
							</div>

						</el-tab-pane>
						<el-tab-pane class="jiankong" name="second">
							<span class="el-tabs-title" slot="label">监控</span>
							<div class="jiankong-opeartion-wrapper  fboxRow">
								<el-select style="width: 130px" v-model="adllEcharsTimeSelect">
									<el-option v-for="item in allEcharsTimeOptions" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
								<el-date-picker class="ml-10" prefix-icon="el-icon-date" value-format="timestamp" @change="changeAllEchartsSelectTime"
								 v-model="allEchartsTimeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
								 end-placeholder="结束日期">
								</el-date-picker>
								<div @click="downLoadEcharts" class="yzButton echartsButton ml-10">
									<span class="text mr-10">下载</span>
									<i class="download"></i>
								</div>

								<div @click="refreshEcharts" class="yzButton echartsButton ml-10">
									<span class="text mr-10">刷新</span>
									<i class="refresh"></i>
								</div>

							</div>
							<el-row :gutter="10">
								<el-col class="echarts-col" :sm="12">
									<div class="echarts-titleWrapper fboxRow">
										<span class="title">CPU使用率(%)</span>
										<i @click="blowUpEcharts('cpu')" class="iconfont">&#xe676;</i>
									</div>
									<div id="echarts-cpu-wrapper" class="echarts-wrapper"></div>
								</el-col>

								<el-col class="echarts-col" :sm="12">
									<div class="echarts-titleWrapper fboxRow">
										<span class="title">内存用量(MB)</span>
										<i @click="blowUpEcharts('memory')" class="iconfont">&#xe676;</i>
									</div>
									<div id="echarts-memory-wrapper" class="echarts-wrapper"></div>
								</el-col>

								<el-col class="echarts-col" :sm="12">
									<div class="echarts-titleWrapper fboxRow">
										<span class="title">带宽用量(Kbsp)</span>
										<i @click="blowUpEcharts('bindwith')" class="iconfont">&#xe676;</i>
									</div>
									<div id="echarts-bindwith-wrapper" class="echarts-wrapper"></div>
								</el-col>

								<el-col class="echarts-col" :sm="12">
									<div class="echarts-titleWrapper fboxRow">
										<span class="title">云盘（I/O）</span>
										<i @click="blowUpEcharts('cloudDisk')" class="iconfont">&#xe676;</i>
									</div>
									<div id="echarts-cloudDisk-wrapper" class="echarts-wrapper"></div>
								</el-col>
							</el-row>

						</el-tab-pane>
					</el-tabs>
				</div>

			</div>


			<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogResetPassword">
				<div slot="title" class="dialog-title">
					重设密码
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-red.png" />
						<p class="fboxCenter" style="line-height: 25px;">
							您将对选中的虚拟主机执行重设密码操作，是否确定该操作？
						</p>
					</div>
					<div style="margin-top: 30px;" class="dialog-selectMethod-wrapper">
						<p style="padding-left: 70px;">重设密码后会自动重启虚拟主机，可能会导致数据的丢失，请先保存数据</p>

					</div>


					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmResetPassword" class="yzButton  confirm">确认</div>
						<div @click="dialogResetPassword = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>

			<el-dialog @closed="closedialogVerifyIdentity" style="box-sizing: border-box;" width="640px" class="yz-el-dialog"
			 :visible.sync="dialogVerifyIdentity">
				<div slot="title" class="dialog-title">
					身份验证
				</div>
				<div class="dialog-content verifyIdentity">
					<div class="dialog-content-desc">
						您将对虚拟主机进行重要的操作，请进行身份的验证，验证30分钟内有效
					</div>
					<p class="text">
						验证码将发送到您的手机号：<span class="phoneNum">123456789</span> 请注意查收
					</p>
					<!-- 验证码 -->
					<el-form style="margin-bottom: 40px;padding-left: 20px;" ref="vercoderRules" label-width="0px" class="demo-ruleForm">

						<el-form-item prop="vercode">
							<div :class="{'formError': isErrorverifiCode}" class="verificationCode-wrapper fboxRow mt-20">
								<div class="input-wrapper">
									<el-input style="width: 320px;" type="text" class="card-box-input" placeholder="请输入验证码" v-model="verificationCode">

									</el-input>
									<span v-if="isErrorverifiCode" class="error-text">验证码输入错误，请重新输入</span>
								</div>

								<div class="yzButton" @click="handleClickSendverificationCode" :class="{'noClick': !phoneCanSendverificationCode}">
									{{handleVerificationCodeText()}}
								</div>
							</div>
						</el-form-item>

					</el-form>

					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmVerifyIdentity" class="yzButton  confirm">确认</div>
						<div @click="dialogVerifyIdentity = false" class="yzButton cancelButton">取消</div>
					</div>


				</div>
			</el-dialog>








			<el-dialog @closed="closeddialogEcharts" close style="box-sizing: border-box" width="1200px" class="yz-el-dialog"
			 :visible.sync="dialogEcharts">
				<div slot="title" class="dialog-title">
					<div style="padding-bottom: 0px;" class="jiankong-opeartion-wrapper  fboxRow">
						<el-select style="width: 130px" v-model="adllEcharsTimeSelect">
							<el-option v-for="item in allEcharsTimeOptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<el-date-picker class="ml-10" prefix-icon="el-icon-date" value-format="timestamp" @change="changeSelectEchartsSelectTime"
						 v-model="selectEchartsTimeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
						 end-placeholder="结束日期">
						</el-date-picker>
						<div @click="downLoadEcharts" class="yzButton echartsButton ml-10">
							<span class="text mr-10">下载</span>
							<i class="download"></i>
						</div>

						<div @click="refreshEcharts" class="yzButton echartsButton ml-10">
							<span class="text mr-10">刷新</span>
							<i class="refresh"></i>
						</div>

					</div>
				</div>
				<div class="dialog-content">
					<div class="echarts-titleWrapper fboxRow mb-20">
						<span class="title">{{handleEchartsTitle()}}</span>
						<div v-if="selectEcharts === 'bindwith'" class="desc-wrapper">
							<span>流入最新流量：2.48Kbps</span>
							<span>流入平均流量：2.48Kbps</span>
							<span>流入最大流量：2.48Kbps</span>
							<span>流出最新流量：2.48Kbps</span>
							<span>流出平均流量：2.48Kbps</span>
							<span>流出最大流量：2.48Kbps</span>
						</div>

						<div v-if="selectEcharts === 'cloudDisk'">
							<el-select style="width: 150px" v-model="selectCloudDisk">
								<el-option v-for="item in cloudDiskOptions" :key="item.id" :label="item.label" :value="item.id">
								</el-option>
							</el-select>
						</div>


					</div>
					<div id="echarts-detail-wrapper" class="echarts-wrapper"></div>
				</div>
			</el-dialog>



			<el-dialog width="940px" class="yz-el-dialog" :visible.sync="dialogRenewVisible">
				<div slot="title" class="dialog-title">
					续费设置
				</div>
				<div class="dialog-content">

					<el-table :data="reNewProductInfo" style="width: 100%">
						<!-- 占位 使用 -->
						<el-table-column width="20" label="">
						</el-table-column>
						<!-- 占位 使用end -->

						<el-table-column prop="productType" label="产品名称/类型">
							<template slot-scope="scope">
								<p class="productName">{{scope.row.productName}}</p>
								<p class="productType">{{scope.row.productType}}</p>

							</template>
						</el-table-column>

						<el-table-column width="300px" label="具体配置">
							<template slot-scope="scope">
								<div class="fboxRow">
									<div class="detail-info">
										<span class="info-unit">CPU:</span>
										<span class="info-val">{{scope.row.cpu}}核</span>
									</div>
									<div class="detail-info">
										<span class="info-unit">数据盘:</span>
										<span class="info-val">{{scope.row.dataDisk}}G</span>
									</div>
								</div>
								<div class="fboxRow">
									<div class="detail-info">
										<span class="info-unit">内存:</span>
										<span class="info-val">{{scope.row.raw}}G</span>
									</div>
									<div class="detail-info">
										<span class="info-unit">带宽:</span>
										<span class="info-val">{{scope.row.bindWith}}G</span>
									</div>
								</div>
								<div class="fboxRow">
									<div class="detail-info">
										<span class="info-unit">SSD:</span>
										<span class="info-val">{{scope.row.ssd}}G</span>
									</div>
									<div class="detail-info">
										<span class="info-unit">操作系统:</span>
										<span class="info-val">{{scope.row.opearSystem}}</span>
									</div>
								</div>
								<div class="fboxRow">
									<div class="detail-info">
										<span style="min-width: 32px;" class="info-unit">IP:</span>
										<span class="info-val">{{scope.row.ip}}个</span>
									</div>
								</div>

							</template>
						</el-table-column>
						<el-table-column prop="ipaddress" label="IP地址">
						</el-table-column>
						<el-table-column prop="sumMoney" label="总金额">
						</el-table-column>
						<el-table-column prop="date" label="到期时间">
						</el-table-column>
					</el-table>
					<div class="renewTime-wrapper mt-20">
						<span>续费周期</span>
						<div class="renewButton-wrapper fboxRow mt-20">
							<div :class="{'active': item.value === activeRenewTime}" @click="selectRenewTime(item)" v-for="(item,index) in  renewButtonGroup"
							 class="mr-10 yzButton renewButton">
								<img v-if="item.haveSale" src="../img/sizegift.png" />
								<span>{{item.name}}</span>
								<div v-if="item.haveSale" class="yz-tooltip saletooltip">{{item.saleContext}}</div>
							</div>
						</div>

					</div>
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmRenew" class="yzButton  confirm">确认</div>
						<div @click="cancelRenew" class="yzButton cancelButton">取消</div>
					</div>
					<div class="dialog-price-wrapper  fboxRow">
						<span class="price-title">续费金额</span>
						<p class="price">
							<span class="price-num">1381.06</span>
							<span class="price-unit">元</span>
						</p>
					</div>

				</div>

			</el-dialog>


		</div>
		<script src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerDetail = new Vue({

				el: '.serverDetail-wrapper',
				data: function() {
					return {
						flowInfo: {
							useData: 75 ,//   使用流量 
							totalData:1024,  // 总流量
						},
						diskInfo: {
							useData: 299 ,//   使磁盘
							totalData:529,  // 总磁盘
							limitData: 300, // 限定磁盘
						},
						
						
						diskpercentage: undefined,// 磁盘百分比
						dialogRenewVisible: false, // 续费
						serverInfo: {
							isHidePassword: true, // 默认为隐藏密码
						},
						activeTabName: 'first', // 默认显示第一个 即用户管理

						// 续费产品信息
						reNewProductInfo: [{
							productType: '服务器类型名称',
							productName: '服务器自定义名称',
							cpu: 1,
							dataDisk: 100,
							raw: 2,
							bindWith: 2,
							ssd: 50,
							opearSystem: 'Windows',
							ip: 1,
							ipaddress: '192.106.1.120',
							sumMoney: 1381.06,
							serverType: '计算型',
							date: '2020-12-04'
						}],
						activeRenewTime: 'year', // 用户选择的续费周期  默认为年
						// 续费周期
						renewButtonGroup: [{
							value: 'month',
							name: '1个月',
							haveSale: false, // 是否有优惠

						}, {
							value: 'quarter',
							name: '3个月',
							haveSale: false, // 是否有优惠
						}, {
							value: 'halfYear',
							name: '6个月',
							haveSale: false, // 是否有优惠
						}, {
							value: 'year',
							name: '1年',
							haveSale: true, // 是否有优惠
							saleContext: '立即优惠1个月费用'
						}, {
							value: 'doubleYear',
							name: '2年',
							haveSale: true, // 是否有优惠
							saleContext: '立即优惠2个月费用'
						}, {
							value: 'threeYear',
							name: '3年',
							haveSale: true, // 是否有优惠
							saleContext: '立即优惠3个月费用'
						}],



						selectEcharts: undefined, // 当前选择的echarts
						// 操作日志时间范围
						logTimeRange: [],
						// 所有echarts图表操作范围
						allEchartsTimeRange: [],
						// 选择的echarts图表操作范围
						selectEchartsTimeRange: [],
						isOpearing: false, // 是否正在操作中
						dialogResetPassword: false, // 重设密码的dialog
						dialogEcharts: false, // 选择放大的echarts dialog
						dialogVerifyIdentity: false, // 身份验证的dialog

						alreadAceessVerify: false, // 是否已经通过验证
						verificationCode: undefined, // 身份验证码
						phoneCanSendverificationCode: true, // 是否能够发送验证码
						phoneWaitVerificationCodeNum: 60, // 手机注册 验证码等待的初始时间
						phoneWaitVerificationCodeTimer: null, // 手机注册等待验证码 计时器
						rightVerificationCode: '12345', // 正确的验证码
						isErrorverifiCode: false, // 验证码是否是错误
						adllEcharsTimeSelect: 'oneDay', // echarts 时间选择
						selectEcharsTimeSelect: 'oneDay', // 弹框echarts 时间选择
						allEcharsTimeOptions: [{
							value: 'oneDay',
							label: '最近一天',
						}, {
							value: 'threeDay',
							label: '最近三天',
						}, {
							value: 'sevenDay',
							label: '最近七天',
						}, {
							value: 'oneMonth',
							label: '最近一个月',
						}], // echats 图表时间数组
						optioncpu: {}, // cpu 图表数据
						optionmemory: {},
						optionbindwith: {},
						optioncloudDisk: {},
						optionflow: {},
						selectCloudDisk: undefined, // 选择的云盘
						cloudDiskOptions: [{
							id: 1,
							label: '磁盘1'
						}, {
							id: 2,
							label: '磁盘2'
						}],
						myChartcpu: undefined, // echarts dom
						myChartmemory: undefined,
						myChartbindwith: undefined,
						myChartcloudDisk: undefined,
						myChartflow: undefined // 流量图
					}
				},

				methods: {
					// 放大Echarts关闭
					closeddialogEcharts: function() {
						// 初始化
						this.selectCloudDisk = this.cloudDiskOptions[0].id
						this.selectEcharts = undefined
						this.selectEcharsTimeSelect = 'oneDay'
						this.selectEchartsTimeRange = []

					},
					// 放大echarts
					blowUpEcharts: _throttle(function(key) {
						this.selectEcharts = key
						this.dialogEcharts = true
						let that = this
						this.$nextTick(function() {
							// 带宽
							var myCharDetail = echarts.init(document.getElementById('echarts-detail-wrapper'));
							var optionDetail
							optionDetail = {}
							if (this.selectEcharts === undefined) {
								optionDetail = {}
							} else if (this.selectEcharts === 'cpu') {
								optionDetail = that.optioncpu
							} else if (this.selectEcharts === 'bindwith') {
								optionDetail = that.optionbindwith
							} else if (this.selectEcharts === 'memory') {
								optionDetail = that.optionmemory
							} else if (this.selectEcharts === 'cloudDisk') {
								that.selectCloudDisk = that.cloudDiskOptions[0].id
								optionDetail = that.optioncloudDisk
							}
							// 重绘的方法
							myCharDetail.setOption(optionDetail, true)
						})
					}),
					// 处理charts title的方法
					handleEchartsTitle: function() {
						if (this.selectEcharts === undefined) {
							return ' '
						} else if (this.selectEcharts === 'cpu') {
							return 'CPU使用率(%)'
						} else if (this.selectEcharts === 'bindwith') {
							return '带宽用量(Kbsp)'
						} else if (this.selectEcharts === 'memory') {
							return '内存用量(MB)'
						} else if (this.selectEcharts === 'cloudDisk') {
							return '云盘(I/O)'
						}
					},
					// 刷新echarts
					refreshEcharts: _throttle(function() {
						console.log('刷新echarts的方法')
					}),
					// 处理流量百分比
					handleFlowRate: function() {
						let num =  Math.round(this.flowInfo.useData * 100 * 100  / this.flowInfo.totalData) / 100 
						return num
					},
					// 处理磁盘百分比
					handleDIskRate: function() {
						this.diskpercentage =  Math.round(this.diskInfo.useData * 100 * 100  / this.diskInfo.totalData) / 100 
						return Number(this.diskpercentage).toFixed(2)
					},
					
					// 下载echarts
					downLoadEcharts: _throttle(function() {
						console.log('下载echarts的方法')
					}),

					// 确认身份验证
					confirmVerifyIdentity: _throttle(function() {
						if (this.verificationCode !== this.rightVerificationCode) {
							// 验证码错误
							console.log('验证码错误')
							this.isErrorverifiCode = true
						}
					}),

					// 处理发送验证码的文案
					handleVerificationCodeText: function() {
						if (this.phoneCanSendverificationCode === true) {
							return '发送验证码'
						} else {

							return '已发送(' + this.phoneWaitVerificationCodeNum + 's)'
						}
					},

					// 发送验证码
					handleClickSendverificationCode: _throttle(function(key) {
						if (this.phoneCanSendverificationCode === false) {
							return
						}
						this.phoneCanSendverificationCode = false
						let that = this
						this.phoneWaitVerificationCodeTimer = setInterval(function() {
							that.phoneWaitVerificationCodeNum--
							if (that.phoneWaitVerificationCodeNum === 0 || that.phoneWaitVerificationCodeNum < 0) {
								clearTimeout(that.phoneWaitVerificationCodeTimer)
								that.phoneCanSendverificationCode = true
								that.phoneWaitVerificationCodeNum = 60
								that.isErrorverifiCode = false
							}
						}, 1000)

					}),

					// 身份验证dialog关闭
					closedialogVerifyIdentity: function() {
						// 初始化
						this.phoneCanSendverificationCode = true
						this.phoneWaitVerificationCodeNum = 60
						this.isErrorverifiCode = false
						this.verificationCode = undefined
					},

					// 点击重设密码
					handleClickResetPassword: _throttle(function() {
						console.log('点击密码')
						this.dialogResetPassword = true
					}),

					//确认重设密码
					confirmResetPassword: _throttle(function() {
						console.log('确认重设密码')
						this.dialogResetPassword = false
						// 如果没有通过验证
						if (!this.alreadAceessVerify) {
							// 身份验证dialog 出现
							this.dialogVerifyIdentity = true
						}

					}),

					// 改变所有的echarts选择时间
					changeAllEchartsSelectTime: function(val) {
						console.log(val)
					},
					//改变选择的echarts选择时间
					changeSelectEchartsSelectTime: function(val) {
						console.log(val)
					},



					// 确认续费的方法
					confirmRenew: _throttle(function() {
						console.log('确认续费的方法')
						this.dialogRenewVisible = false
					}),
					// 关闭续费弹窗的方法
					cancelRenew: function() {
						this.dialogRenewVisible = false
					},
					// 处理磁盘进度条颜色
					customColorMethod: function(percentage) {
						        if (this.diskInfo.useData < this.diskInfo.limitData) {
						          return '#6462F3';
						        } else{
						          return '#FF9416';
						        } 
					},
					// 选择续费周期的方法
					selectRenewTime: function(item) {
						this.activeRenewTime = item.value
						console.log('选择周期', item)
					},
					clickTabSecond: function() {
						let that = this
						this.$nextTick(function() {
							//cpu
							that.myChartcpu = echarts.init(document.getElementById('echarts-cpu-wrapper'));
							that.optioncpu = {
								backgroundColor: '#fff',
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										lineStyle: {
											type: 'dashed',
											color: '#D7D7D7'
										},
									},
									padding: [15, 15, 15, 15],
									backgroundColor: '#fff',
									textStyle: {
										color: '#777',
										fontSize: 14
									},
									formatter: function(params, ticket, callback) {
										let res
										if (params.length > 0) {

											// 取到时间的值  因为多个点在同一x轴的值是一样的 所以取第一个即可
											let timeText = params[0].axisValue
											if (timeText !== undefined) {
												res = '<div style="line-height:14px;margin-bottom: 10px;">' + timeText + '</div>'
											}

											for (let i = 0; i < params.length; i++) {
												res += '<div style="display: flex;"><span>'


												if (i === 0) {
													res +=
														'<img style="margin-top:3px;margin-right:5px;position:relation;top:4px;width:16px;height:14px" src="./img/CPU.png" />'
												} else if (i === 1) {
													res +=
														'<img style="margin-top:3px;margin-right:5px;position:relation;top:4px;width:16px;height:14px" src="./img/bandwidth-blue.png" />'
												}

												res += params[i].seriesName + '</span>：<span>' + params[i].value + '</span></div>'

											}

										}

										return res;
									},
									extraCssText: 'box-shadow: 0px 4px 13px 1px rgba(1,24,167,0.1);border: 1px solid #D7D7D7;z-index:10'
								},
								grid: {
									top: '10%',
									left: '10%',
									right: '10%',
									bottom: '15%',
									// containLabel: true
								},
								xAxis: [{
									nameTextStyle: {
										padding: [20, 0, 0, 0]
									},

									type: 'category',
									axisLine: {
										show: true,
										color: '#C4C4C4'
									},
									splitArea: {
										show: false,
									},
									axisLabel: {
										color: '#333',
										// 坐标轴间距
										margin: 20,
										formatter: function(value, index) {
											let texts = value.split(' ')
											return texts[0] + '\n' + texts[1];
										},
									},
									splitLine: {
										show: false
									},
									boundaryGap: false,
									data: ['2020-11-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16',
										'2020-12-30 11:18:16', '2020-12-30 11:18:16'
									],

								}],
								yAxis: {
									nameTextStyle: {
										show: false,
										fontSize: 18,
										color: '#333',
										padding: [0, 0, 0, 0]

									},
									nameGap: 0,
									axisLine: true,
									axisLabel: {
										fontSize: 14,
										color: '#333',
										// 坐标轴间距
										margin: 37

									},
									splitLine: {
										show: true,
										lineStyle: {
											color: "#D7D7D7",
											width: 1,
											type: "dashed"
										}

									}
								},
								series: [{
									name: 'CPU使用率',
									type: 'line',
									smooth: true, //是否平滑
									showAllSymbol: false,
									// 该属性只在触摸的才显示Symbol
									showSymbol: false,
									// symbol: 'image://./static/images/guang-circle.png',
									symbol: 'circle',
									symbolSize: 5,
									lineStyle: {
										// 线的颜色
										normal: {
											width: 3,
											color: "#6462F3",
										},
									},

									itemStyle: {
										color: "#fff",
										borderColor: "#6462F3",
										backgroundColor: "#fff",
										borderWidth: 3,
										// shadowColor: 'rgba(0, 0, 0, .3)',
										// shadowBlur: 0,
										// shadowOffsetY: 2,
										// shadowOffsetX: 2,
									},

									tooltip: {
										show: true,
									},
									areaStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
													offset: 0,
													color: 'rgba(100,98,243,0.3)'
												},
												{
													// 渐变色终止的位置
													offset: 0.6,
													color: 'rgba(100,98,243,0)'
												}
											], false),
											shadowColor: 'rgba(100,98,243,0.5)',
											shadowBlur: 20
										}
									},
									data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
								}, ]
							};
							that.myChartcpu.setOption(that.optioncpu)

							// 内存
							that.myChartmemory = echarts.init(document.getElementById('echarts-memory-wrapper'));
							that.optionmemory = {
								backgroundColor: '#fff',
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										lineStyle: {
											type: 'dashed',
											color: '#D7D7D7'
										},
									},
									padding: [15, 15, 15, 15],
									backgroundColor: '#fff',
									textStyle: {
										color: '#777',
										fontSize: 14
									},
									formatter: function(params, ticket, callback) {
										let res
										if (params.length > 0) {

											// 取到时间的值  因为多个点在同一x轴的值是一样的 所以取第一个即可
											let timeText = params[0].axisValue
											if (timeText !== undefined) {
												res = '<div style="line-height:14px;margin-bottom: 10px;">' + timeText + '</div>'
											}

											for (let i = 0; i < params.length; i++) {
												res += '<div style="display: flex;position:relation;"><span>'


												if (i === 0) {
													res +=
														'<img style="display: inline-block;margin-top:3px;margin-right:7px;position:relation;top:7px;width:16px;height:14px" src="./img/memory-blue.png" />'
												} else if (i === 1) {
													res +=
														'<img style="display: inline-block;margin-top:3px;margin-right:7px;position:relation;top:7px;width:16px;height:14px" src="./img/memory-green.png" />'
												}

												res += params[i].seriesName + '</span>：<span>' + params[i].value + '</span></div>'

											}

										}

										return res;
									},
									extraCssText: 'z-index:10;box-shadow: 0px 4px 13px 1px rgba(1,24,167,0.1);border: 1px solid #D7D7D7;'
								},
								grid: {
									top: '10%',
									left: '10%',
									right: '10%',
									bottom: '15%',
									// containLabel: true
								},
								xAxis: [{
									nameTextStyle: {
										padding: [20, 0, 0, 0]
									},

									type: 'category',
									axisLine: {
										show: true,
										color: '#C4C4C4'
									},
									splitArea: {
										show: false,
									},
									axisLabel: {
										color: '#333',
										// 坐标轴间距
										margin: 20,
										formatter: function(value, index) {
											let texts = value.split(' ')
											return texts[0] + '\n' + texts[1];
										},
									},
									splitLine: {
										show: false
									},
									boundaryGap: false,
									data: ['2020-11-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16',
										'2020-12-30 11:18:16', '2020-12-30 11:18:16'
									],

								}],
								yAxis: {

									nameTextStyle: {
										fontSize: 18,
										color: '#333',
										padding: [0, 0, 0, 0]

									},
									nameGap: 0,
									axisLine: true,
									axisLabel: {
										fontSize: 14,
										color: '#333',
										// 坐标轴间距
										margin: 37

									},
									splitLine: {
										show: true,
										lineStyle: {
											color: "#D7D7D7",
											width: 1,
											type: "dashed"
										}

									}
								},
								series: [{
									name: '内存总量 (MB)',
									type: 'line',
									smooth: true, //是否平滑
									showAllSymbol: false,
									// 该属性只在触摸的才显示Symbol
									showSymbol: false,
									// symbol: 'image://./static/images/guang-circle.png',
									symbol: 'circle',
									symbolSize: 5,
									lineStyle: {
										// 线的颜色
										normal: {
											width: 3,
											color: "#6462F3",
										},
									},

									itemStyle: {
										color: "#fff",
										borderColor: "#6462F3",
										backgroundColor: "#fff",
										borderWidth: 3,
										// shadowColor: 'rgba(0, 0, 0, .3)',
										// shadowBlur: 0,
										// shadowOffsetY: 2,
										// shadowOffsetX: 2,
									},

									tooltip: {
										show: true,
									},
									areaStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
													offset: 0,
													color: 'rgba(100,98,243,0.3)'
												},
												{
													// 渐变色终止的位置
													offset: 0.6,
													color: 'rgba(100,98,243,0)'
												}
											], false),
											shadowColor: 'rgba(100,98,243,0.5)',
											shadowBlur: 20
										}
									},
									data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
								}]
							};
							that.myChartmemory.setOption(that.optionmemory)


							// 带宽
							that.myChartbindwith = echarts.init(document.getElementById('echarts-bindwith-wrapper'));
							that.optionbindwith = {
								backgroundColor: '#fff',
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										lineStyle: {
											type: 'dashed',
											color: '#D7D7D7'
										},
									},
									padding: [15, 15, 15, 15],
									backgroundColor: '#fff',
									textStyle: {
										color: '#777',
										fontSize: 14
									},
									formatter: function(params, ticket, callback) {
										let res
										if (params.length > 0) {

											// 取到时间的值  因为多个点在同一x轴的值是一样的 所以取第一个即可
											let timeText = params[0].axisValue
											if (timeText !== undefined) {
												res = '<div style="line-height:14px;margin-bottom: 10px;">' + timeText + '</div>'
											}

											if (params.length > 1) {
												for (let i = 0; i < params.length; i++) {
													res += '<div style="display: flex;"><span>'


													if (i === 0) {
														res +=
															'<img style="margin-top:3px;margin-right:5px;position:relation;top:4px;width:16px;height:14px" src="./img/bandwidth-green.png" />'
													} else if (i === 1) {
														res +=
															'<img style="margin-top:3px;margin-right:5px;position:relation;top:4px;width:16px;height:14px" src="./img/bandwidth-blue.png" />'
													}

													res += params[i].seriesName + '</span>：<span>' + params[i].value + '</span></div>'

												}
											}

										}

										return res;
									},
									extraCssText: 'z-index:10;box-shadow: 0px 4px 13px 1px rgba(1,24,167,0.1);border: 1px solid #D7D7D7;'
								},
								grid: {
									top: '10%',
									left: '10%',
									right: '10%',
									bottom: '15%',
									// containLabel: true
								},
								xAxis: [{
									nameTextStyle: {
										padding: [20, 0, 0, 0]
									},

									type: 'category',
									axisLine: {
										show: true,
										color: '#C4C4C4'
									},
									splitArea: {
										show: false,
									},
									axisLabel: {
										color: '#333',
										// 坐标轴间距
										margin: 20,
										formatter: function(value, index) {
											let texts = value.split(' ')
											return texts[0] + '\n' + texts[1];
										},
									},
									splitLine: {
										show: false
									},
									boundaryGap: false,
									data: ['2020-11-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16',
										'2020-12-30 11:18:16', '2020-12-30 11:18:16'
									],

								}],
								yAxis: {

									nameTextStyle: {
										fontSize: 18,
										color: '#333',
										padding: [0, 0, 0, 0]

									},
									nameGap: 0,
									axisLine: true,
									axisLabel: {
										fontSize: 14,
										color: '#333',
										// 坐标轴间距
										margin: 37

									},
									splitLine: {
										show: true,
										lineStyle: {
											color: "#D7D7D7",
											width: 1,
											type: "dashed"
										}

									}
								},
								series: [{
										name: '进 (Kbps)',
										type: 'line',
										smooth: true, //是否平滑
										showAllSymbol: false,
										// 该属性只在触摸的才显示Symbol
										showSymbol: false,
										// symbol: 'image://./static/images/guang-circle.png',
										symbol: 'circle',
										symbolSize: 5,
										lineStyle: {
											// 线的颜色
											normal: {
												width: 3,
												color: "#6462F3",
											},
										},

										itemStyle: {
											color: "#fff",
											borderColor: "#6462F3",
											backgroundColor: "#fff",
											borderWidth: 3,
											// shadowColor: 'rgba(0, 0, 0, .3)',
											// shadowBlur: 0,
											// shadowOffsetY: 2,
											// shadowOffsetX: 2,
										},

										tooltip: {
											show: true,
										},
										areaStyle: {
											normal: {
												color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: 'rgba(100,98,243,0.3)'
													},
													{
														// 渐变色终止的位置
														offset: 0.6,
														color: 'rgba(100,98,243,0)'
													}
												], false),
												shadowColor: 'rgba(100,98,243,0.5)',
												shadowBlur: 20
											}
										},
										data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
									},
									{
										name: '出 (Kbps)',
										type: 'line',
										smooth: true, //是否平滑
										showSymbol: false,
										showAllSymbol: false,
										// symbol: 'image://./static/images/guang-circle.png',
										symbol: 'circle',
										symbolSize: 5,
										lineStyle: {
											normal: {
												width: 3,
												color: "#3FBF70",
											},
										},
										itemStyle: {
											color: "#fff",
											borderColor: "#3FBF70",
											backgroundColor: "#fff",
											borderWidth: 3,
										},
										tooltip: {
											show: true
										},
										areaStyle: {
											normal: {
												color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: 'rgba(63,191,112,0.3)'
													},
													{
														offset: 0.6,
														color: 'rgba(63,191,112,0)'
													}
												], false),
												shadowColor: 'rgba(63,191,112,0.5)',
												shadowBlur: 20
											}
										},
										data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
									},
								]
							};
							that.myChartbindwith.setOption(that.optionbindwith)

							// 云盘
							that.myChartcloudDisk = echarts.init(document.getElementById('echarts-cloudDisk-wrapper'));
							that.optioncloudDisk = {
								backgroundColor: '#fff',
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										lineStyle: {
											type: 'dashed',
											color: '#D7D7D7'
										},
									},
									padding: [15, 15, 15, 15],
									backgroundColor: '#fff',
									textStyle: {
										color: '#777',
										fontSize: 14
									},
									formatter: function(params, ticket, callback) {
										let res
										if (params.length > 0) {

											// 取到时间的值  因为多个点在同一x轴的值是一样的 所以取第一个即可
											let timeText = params[0].axisValue
											if (timeText !== undefined) {
												res = '<div style="line-height:14px;margin-bottom: 10px;">' + timeText + '</div>'
											}

											if (params.length > 1) {
												for (let i = 0; i < params.length; i++) {
													res += '<div style="display: flex;position:relation;"><span>'


													if (i === 0) {
														res +=
															'<img style="display: inline-block;margin-top:3px;margin-right:7px;position:relation;top:7px;width:16px;height:14px" src="./img/memory-blue.png" />'
													} else if (i === 1) {
														res +=
															'<img style="display: inline-block;margin-top:3px;margin-right:7px;position:relation;top:7px;width:16px;height:14px" src="./img/memory-green.png" />'
													}

													res += params[i].seriesName + '</span>：<span>' + params[i].value + '</span></div>'

												}
											}

										}

										return res;
									},
									extraCssText: 'z-index:10;box-shadow: 0px 4px 13px 1px rgba(1,24,167,0.1);border: 1px solid #D7D7D7;'
								},
								grid: {
									top: '10%',
									left: '10%',
									right: '10%',
									bottom: '15%',
									// containLabel: true
								},
								xAxis: [{
									nameTextStyle: {
										padding: [20, 0, 0, 0]
									},

									type: 'category',
									axisLine: {
										show: true,
										color: '#C4C4C4'
									},
									splitArea: {
										show: false,
									},
									axisLabel: {
										color: '#333',
										// 坐标轴间距
										margin: 20,
										formatter: function(value, index) {
											let texts = value.split(' ')
											return texts[0] + '\n' + texts[1];
										},
									},
									splitLine: {
										show: false
									},
									boundaryGap: false,
									data: ['2020-11-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16',
										'2020-12-30 11:18:16', '2020-12-30 11:18:16'
									],

								}],
								yAxis: {
									nameTextStyle: {
										fontSize: 18,
										color: '#333',
										padding: [0, 0, 0, 0]

									},
									nameGap: 0,
									axisLine: true,
									axisLabel: {
										fontSize: 14,
										color: '#333',
										// 坐标轴间距
										margin: 37

									},
									splitLine: {
										show: true,
										lineStyle: {
											color: "#D7D7D7",
											width: 1,
											type: "dashed"
										}
									}
								},
								series: [{
										name: '内存总量 (MB)',
										type: 'line',
										smooth: true, //是否平滑
										showAllSymbol: false,
										// 该属性只在触摸的才显示Symbol
										showSymbol: false,
										// symbol: 'image://./static/images/guang-circle.png',
										symbol: 'circle',
										symbolSize: 5,
										lineStyle: {
											// 线的颜色
											normal: {
												width: 3,
												color: "#6462F3",
											},
										},

										itemStyle: {
											color: "#fff",
											borderColor: "#6462F3",
											backgroundColor: "#fff",
											borderWidth: 3,
											// shadowColor: 'rgba(0, 0, 0, .3)',
											// shadowBlur: 0,
											// shadowOffsetY: 2,
											// shadowOffsetX: 2,
										},

										tooltip: {
											show: true,
										},
										areaStyle: {
											normal: {
												color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: 'rgba(100,98,243,0.3)'
													},
													{
														// 渐变色终止的位置
														offset: 0.6,
														color: 'rgba(100,98,243,0)'
													}
												], false),
												shadowColor: 'rgba(100,98,243,0.5)',
												shadowBlur: 20
											}
										},
										data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
									},
									{
										name: '已用 (MB)',
										type: 'line',
										smooth: true, //是否平滑
										showSymbol: false,
										showAllSymbol: false,
										// symbol: 'image://./static/images/guang-circle.png',
										symbol: 'circle',
										symbolSize: 5,
										lineStyle: {
											normal: {
												width: 3,
												color: "#3FBF70",
											},
										},
										itemStyle: {
											color: "#fff",
											borderColor: "#3FBF70",
											backgroundColor: "#fff",
											borderWidth: 3,
										},
										tooltip: {
											show: true
										},
										areaStyle: {
											normal: {
												color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: 'rgba(63,191,112,0.3)'
													},
													{
														offset: 0.6,
														color: 'rgba(63,191,112,0)'
													}
												], false),
												shadowColor: 'rgba(63,191,112,0.5)',
												shadowBlur: 20
											}
										},
										data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
									},
								]
							};
							that.myChartcloudDisk.setOption(that.optioncloudDisk)
						})
					},
					handleClickTab: function(tab) {
						let name = tab.name
						if (name === 'second') {
							this.clickTabSecond()
						}
					},
					resize: function() {
						try {
							this.myChartflow.resize()
							this.myChartcpu.resize()
							this.myChartmemory.resize()
							this.myChartbindwith.resize()
							this.myChartcloudDisk.resize()
							
						} catch (e) {
							//TODO handle the exception
						}
					},
					// 加载流量图表
					loadFlowChart:function() {
						let that = this
						this.$nextTick(function() {
							//流量
							that.myChartflow = echarts.init(document.getElementById('echarts-flow-wrapper'));
							
							that.optionflow = {
								backgroundColor: '#fff',
							
								angleAxis: {
									show: false,
									max: 100 * 360 / 180, //180度到0度，二者偏移值是180度   100 * 360 / 180 
									type: 'value',
									startAngle: 180, //极坐标初始角度
									splitLine: {
										show: false
									}
								},
								barMaxWidth: 14, //圆环宽度
								radiusAxis: {
									show: false,
									type: 'category',
								},
								//圆环位置和大小
								polar: {
									center: ['50%', '70%'],
									radius: '190'
								},
								series: [{
										type: 'bar',
										data: [{ //上层圆环，显示数据
											value: (that.flowInfo.useData / that.flowInfo.totalData) * 100,
											itemStyle: {
												color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
													type: 'linear',
													x: 0,
													y: 0,
													x2: 1, //从左到右 0-1
													y2: 0,
													colorStops: [{
														offset: 0,
														color: '#658dfa'
													}, {
														offset: 1,
														color: '#6462f3'
													}],
												},
											},
										}],
										barGap: '-100%', //柱间距离,上下两层圆环重合
										coordinateSystem: 'polar',
										roundCap: true, //顶端圆角从 v4.5.0 开始支持
										z: 2 //圆环层级，同zindex
									},
									{ //下层圆环，显示最大值
										type: 'bar',
										data: [{
											value: 100,
											// 这里写成这样是为了解决触摸 颜色改变的问题， 下面这样写法不会变色
											itemStyle: {
												color: {
													colorStops: [{
														offset: 0,
														color: '#F1EFF2'
													}, {
														offset: 1,
														color: '#F1EFF2'
													}],
												},
											},
											hoverAnimation: false,
										}],
										hoverAnimation: false, // hover 无变化
										barGap: '-100%',
										coordinateSystem: 'polar',
										roundCap: true,
										z: 1,
										
									},
									//文字输出
									{
										center: ['50%', '70%'],
										type: 'gauge',
										// startAngle: 225, //起始角度，同极坐标
										// endAngle: -45, //终止角度，同极坐标
										axisLine: {
											show: false,
										},
										splitLine: {
											show: false
										},
										axisTick: {
											show: false
										},
										axisLabel: {
											show: false
										},
										splitLabel: {
											show: false
										},
										pointer: {
											show: false
										},
										hoverAnimation: false, // hover 无变化
										title: {
											offsetCenter: [-20, -10],
											color: '#FFFFFF',
											fontSize: 60,
											fontWeight: 500,
											rich: {
												a: {
													fontWeight: 'normal',
													fontSize: 16,
													color: '#FFF',
													padding: [0, 0, 10, 40]
												}
											}
										},
							
										detail: {
											show: true,
											formatter: [
												'{value}G',
												'{name|已使用}'
											].join('\n'),
											rich: {
												name: {
													fontSize: 14,
													lineHeight: 20,
													color: '#777777'
												}
											},
											color: '#333',
											fontSize: 36,
											offsetCenter: [-0, -10]
										},
							
										data: [{
											value: that.flowInfo.useData,
										}]
									}
								]
							}
							that.myChartflow.setOption(that.optionflow)
						})
					},
					diskFormt: function() {
						return ''
					},
					progressStyele:function() {
						let leftPx = (Math.round(this.diskInfo.limitData * 100 * 100  / this.diskInfo.totalData) / 100 ) + '%'
						
						return {
							left:leftPx,
						}
					},
					// 点击登录 DIrectadmin
					loginDIrectadmin:_throttle(function() {
						console.log('点击登录 DIrectadmin')
					})
				},
				mounted: function() {
					window.addEventListener('resize', this.resize)
					// 加载流量图表
					this.loadFlowChart()
					// 计算磁盘百分比
					this.handleDIskRate()
				}

			})
		</script>
	</body>
</html>
